<template>
  <div class="live-main">

    <div class="r-aside">
      <div class="video-group">
        <div class="v-header">
          <div class="vh-left">
            <img class="img" :src="videoPNG" mode="scaleToFill" />
            <span class="txt">直播画面</span>
          </div>
          <div class="vh-right">
            <span class="txt">收起</span>
            <img
              :class="['img', videoFold ? 'fold' : '']"
              :src="showqiPNG"
              mode="scaleToFill"
            />
          </div>
        </div>
        <div class="v-content">
          <video src=""></video>
        </div>
      </div>
      <div class="capater-group">
        <!-- 章节 -->
        <div class="cg-title">
          <img class="img" :src="zhangjiePNG" mode="scaleToFill" />
          <span class="txt">直播章节</span>
        </div>
        <div class="cg-info">
          <div class="step-group">
            <div class="step-item" v-for="(item, index) in capaterList">
              <div
                :class="[
                  'step_icon',
                  index <= capaterActiveIndex ? 'active' : ''
                ]"
              ></div>
              <div
                v-if="index < capaterList.length - 1"
                :class="[
                  'step_line',
                  index < capaterActiveIndex ? 'active' : ''
                ]"
              ></div>

              <div
                :class="[
                  'step_txt',
                  index <= capaterActiveIndex ? 'active' : ''
                ]"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计 -->
      <div class="statistics-group">
        <div class="title">
          <img class="img" :src="tongjiPNG" mode="scaleToFill" />
          <span class="txt">要点统计图</span>
        </div>
        <div class="chart" ref="chartRef"></div>
      </div>
    </div>
    <div class="l-aside">
      <div class="ls_part1">
        <div class="lsp_left">
          <div class="lspl_capetar">
            <div class="title-wrap">
              <img class="img" :src="zongjiePNG" mode="scaleToFill" />
              <span class="txt">章节总结</span>
              <div class="name primary-txt">
              {{ currentCapater }}
            </div>
            </div>
            <div class="label-wrap">
              <span class="label primary-txt" v-for="(item,index) in currentCapaterKeyWord" :key="index">{{ item }}</span>
            </div>
            <div class="theme-wrap">
              <div class="theme__title">
                <span class="label">主题：</span>
                <span class="txt">直播带货</span>
              </div>
              <div class="label">涉嫌虚假宣传内容：</div>
              <div class="txt">直播中存在一些绝对化用语，如“最好看”、“最性感”、“最透气”等，可能 涉嫌虚假宣传。</div>
            </div>
          </div>
          <div class="googds">
            <el-tabs v-model="goodsActiveTab">
              <el-tab-pane v-for="(good,index ) in goodsList" :label="good.label" :name="good.name" :key="index">
                <ProductList :good="good.data" @showProductPic="showProductPic" @insertKeyPointToEditor="insertKeyPointToEditor"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="lsp_right">
          <div class="title-wrap">
              <img class="img" :src="heshiPNG" mode="scaleToFill" />
              <span class="txt">核实要点</span>
              <div class="name primary-txt">
                绝对化用户宣传
              </div>
            </div>
          <div class="editor-wrap">
            <TinymceEditor ref="editorChildRef"></TinymceEditor>
          </div>
        </div>
      </div>
      <div class="ls_part2">
        <div class="title-wrap">
          <img class="img" :src="zimuPNG" mode="scaleToFill" />
          <span class="txt">直播字幕</span>
        </div>
        <div class="caption-wrap">
          <CaptionList :captionList="captionList"></CaptionList>
        </div>
      </div>
    </div>
    <ImagePanel v-model:visible="imagePanelVisible" :imageList="goodsImageList" @insertImgToEditor="insertImgToEditor"></ImagePanel>
  </div>
  
</template>
<script setup>
import videoPNG from '@/assets/images/video.png'
import showqiPNG from '@/assets/images/shouqi.png'
import zhangjiePNG from '@/assets/images/zhangjie.png'
import tongjiPNG from '@/assets/images/tongji.png'
import zongjiePNG from '@/assets/images/zongjie.png'
import heshiPNG from '@/assets/images/heshi.png'
import zimuPNG from '@/assets/images/zimu.png'
import * as echarts from 'echarts'
import ProductList from '@/components/ProductList.vue'
import TinymceEditor from '@/components/TinymceEditor/index.vue'
import CaptionList from '@/components/CaptionList.vue'
import ImagePanel from '@/components/ImagePanel.vue'

// import { CircleCheckFilled } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
const editorChildRef = ref(null)
const imagePanelVisible = ref(false)
const captionList = ref([
  {
    time:'00:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  },
  {
    time:'01:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  },
  {
    time:'01:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  },
  {
    time:'01:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  },
  {
    time:'01:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  },
  {
    time:'01:00',
    content:'字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字幕字'
  }
])
const goodsImageList = ref([
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
])
const videoFold = ref(false)
// 章节
const capaterList = ref([
  '第一章节',
  '第二章节',
  '第三章节',
  '第四章节',
  '第五章节',
  '第六章节',
  '第七章节',
  '第八章节',
  '第九章节',
  '第十章节'
])
const currentCapater = ref('第一章节')
const currentCapaterKeyWord = ref(['绝对化用户宣传(6)','资格资质(11)','绝对化用户宣传(6)'])
const chartRef = ref(null)
const capaterActiveIndex = ref(0)
const goodsActiveTab = ref('good1')
const good1Data = {
  name:'商品名称商品名称商品',
  onlineNameList:[
    {
      label:'名称1',
      value:'oName1'
    },{
      label:'名称2',
      value:'oName2'
    },{
      label:'名称3',
      value:'oName3'
    }
  
  ],
  startTime:'1s',
  endTime:'13m12s',
  detail:[
    {
      title:'绝对化用户宣传',
      des:'”最好看”、“最性感”、“最透气”、最好看”、“最性感”、 “最透气”、“最透气”、“最透气”、“最透气”、“最透气”',
      time:'1s'
    },
    {
      title:'资格资质',
      des:'三A级抗菌 拷贝',
      time:'三A级抗菌 拷贝'
    },
    {
      title:'绝对化用户宣传',
      des:'”最好看”、“最性感”、“最透气”、最好看”、“最性感”、 “最透气”、“最透气”、“最透气”、“最透气”、“最透气”',
      time:'1s'
    }
  ]
}
const goodsList = ref([
  {
    label:'商品1',
    name:'good1',
    data:good1Data
  },
  {
    label:'商品2',
    name:'good2',
    data:good1Data
  },
  {
    label:'商品3',
    name:'good3',
    data:good1Data
  },
  {
    label:'商品4',
    name:'good4',
    data:good1Data
  },
  {
    label:'商品5',
    name:'good5',
    data:good1Data
  }
])



function initChart() {
  let ele = chartRef.value
  let option = {
    tooltip: {
      trigger: 'item',
      show: true,
      textStyle: {
        align: 'right'
      },
    },
    legend: {
      data: ['销量', '获得荣誉', '绝对化用户宣传', '类型', '资格资质'],
      bottom:20,
    },
    title: {
      text: '要点统计图',
      left: '48%',
      top: '80px',
      textAlign:'center',
      textStyle:{
        fontSize:14
      }
    },
    series: [
      {
        type: 'pie',
        center: ['50%', '90px'],
        labelLine:{
          show:false
        },
        label:{
          show:false
        },
        data: [
          {
            value: 1,
            name: '销量'
          },
          {
            value: 4,
            name: '获得荣誉'
          },
          {
            value: 6,
            name: '绝对化用户宣传'
          },
          {
            value: 8,
            name: '类型'
          },
          {
            value: 11,
            name: '资格资质'
          }
        ],
        radius: ['40%', '70%']
      }
    ]
  }
  const myChart = echarts.init(ele);
  myChart.setOption(option)
}

function showProductPic(product){
  // 获取product对应的image
  imagePanelVisible.value = true
}
function insertKeyPointToEditor(keyPointData){
  let title = keyPointData.title
  let des = keyPointData.des
  
  let insertHtml = `<p>${title}</p><p>${des}</p>`
  editorChildRef.value.insertContent(insertHtml)
}
function insertImgToEditor(curImg){
  console.log('curImg:',curImg)
  const insertHtml = `<p><img style="width:100%;" src="${curImg}" alt=""></p>`
  editorChildRef.value.insertContent(insertHtml)
}
onMounted(() => {
  initChart()
})
</script>
<style lang="scss" scoped>

.live-main {
  width: 1200px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px 12px;
  margin: auto;
  .r-aside {
    width: 280px;
    .video-group {
      width: 100%;
      width: 280px;
      height: 516px;
      background: #ffffff;
      border-radius: 15px;
      box-sizing: border-box;
      padding: 16px 10px;
      .v-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .vh-left {
          display: flex;
          align-items: center;
          .img {
            width: 20px;
            height: 20px;
          }
          .txt {
            margin-left: 5px;
            font-weight: bolder;
            font-size: 14px;
            color: #000000;
          }
        }
        .vh-right {
          display: flex;
          align-items: center;
          .txt {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }
          .img {
            width: 14px;
            height: 8px;
            transition: transform 0.5s;
            margin-left: 5px;
            &.fold {
              transform: rotate(180deg);
            }
          }
        }
      }
      .v-content {
        border-radius: 15px;
        margin-top: 12px;
        width: 100%;
        height: 464px;
      }
    }
    .capater-group {
      background-color: white;
      padding: 16px 20px;
      border-radius: 15px;
      box-sizing: border-box;
      height: 420px;
      margin-top: 10px;
      .cg-title {
        display: flex;
        align-items: center;
        .img {
          width: 20px;
          height: 20px;
        }
        .txt {
          margin-left: 5px;
          font-weight: bolder;
          font-size: 14px;
          color: #000000;
        }
      }
      .cg-info {
        margin-top: 10px;
        margin-left: 20px;

        .step-group {
          height: 340px;
          overflow: hidden;
          overflow-y:auto ;
          &::-webkit-scrollbar {
              width: 4px;
          }
          &::-webkit-scrollbar-thumb {
              background: #ccc; // 滑块颜色
              border-radius: 5px; // 滑块圆角
          }
          .step-item {
            width: 100%;
            height: 50px;
            position: relative;
            display: flex;
            align-items: center;
            .step_line {
              position: absolute;
              left: 4px;
              top: 35px;
              height: 30px;
              width: 0px;
              border-left: 2px dotted rgba(96, 90, 229, 0.5);
              &.active {
                border-left: 2px dotted rgba(96, 90, 229, 1);
              }
            }
            .step_icon {
              width: 10px;
              height: 10px;
              background-color: rgba(96, 90, 229, 0.5);
              border-radius: 50%;
              position: relative;
              z-index: 100;
              &.active {
                background: #605ae5;
              }
            }
            .step_txt {
              margin-left: 20px;
              width: 120px;
              height: 30px;
              background: #e7e7fb;
              border-radius: 15px;
              font-weight: 400;
              font-size: 14px;
              color: #8994d1;
              text-align: center;
              line-height: 30px;
              &.active {
                width: 120px;
                height: 30px;
                background: #605ae5;
                border-radius: 15px;
                font-weight: bold;
                font-size: 14px;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .statistics-group {
      background-color: white;
      padding: 16px 20px;
      border-radius: 15px;
      box-sizing: border-box;
      margin-top: 10px;
      .title {
        display: flex;
        align-items: center;

        .img {
          width: 20px;
          height: 20px;
          transition: transform 0.5s;
        }
        .txt {
          margin-left: 5px;
          font-weight: bolder;
          font-size: 14px;
          color: #000000;
        }
      }
      .chart {
        margin: auto;
        margin-top: 20px;
        height: 280px;
        width: 240px;
      }
    }
  }
  .l-aside{
    margin-left: 10px;
    width:  calc(100% - 290px);
    box-sizing: border-box;
    
    .ls_part1{
      display: flex;
      align-items: flex-start;
      width: 100%;
      height: 560px;
      
      .lsp_left{
        width: 438px;
        box-sizing: border-box;
        .lspl_capetar{
          padding: 16px 10px;
          .title-wrap{
            .name{
              margin-left: 10px;
            }
          }
          .label-wrap{
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .theme-wrap{
            font-size: 12px;
            margin-top:10px;
            .label{
              color:#666;
              margin-top:10px;
            }
            .txt{
              font-weight: bold;
              color: #333;
              margin-top: 4px;
            }
          }
        }
        .googds{
          width: 438px;
          height: 385px;
          background: #FFFFFF;
          border-radius: 15px;
          padding: 16px 10px;
          box-sizing: border-box;
        }
      }
      .lsp_right{
        width: calc(100% - 448px);
        margin-left: 10px;
        padding:16px 20px;
        height: inherit;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 15px;
        .title-wrap{
          .name{
            margin-left: 10px;
          }
        }
        .editor-wrap{
          width: 100%;
          height: calc(100% - 20px);
        }
      }
    }
    .ls_part2{
      margin-top:10px;
      padding:16px 20px;
      height: inherit;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 15px;
    }
  }
}
</style>
